<template>
	<view>
		
		<formList ref="formRef" :formArr="formArr" :formObj.sync="formObj"/>
			
           <uni-list>
           	<uni-list-item :show-extra-icon="true"  
						   :extra-icon="extraIcon" 
						   clickable
						   showArrow 
						   :title="location" 
						   @click="switchChange" 
						   rightText="重新获取位置"/>
			<uni-list-item :show-extra-icon="true"
						   :extra-icon="luIcon" 
						   clickable
						   showArrow 
						   :title="luying" 
						   @click="startRecord" 
						   :rightText="luying_new"/>
           </uni-list>
		   
		   <uni-group title="添加照片(最多9张):" top="0" background-color="#413f3e">
		 	 
		        <view class="an-img" v-for="(item, index) in imgList" :key="index" @click="perviewImg(index)">
		        	<image :src="item" v-if="item"></image>
		        	<view class="an-icon-close" @click.stop="handleRemove(index)">
		        		<uni-icons type="closeempty" size="26" color="#F00"></uni-icons>
		        	</view>
		        </view>
				<view v-if="imageType" class="an-img-add" @click="chooseImage"> 
					<uni-icons type="plusempty" size="40" color=view >"#FFFFFF"></uni-icons>
				</view>
					
		   </uni-group>
		   
		   <uni-row class="demo-uni-row" :width="nvueWidth">
		      <view v-for="num in rowList" name="ss">
		          <uni-col :span="8">
		          	<view class="demo-uni-col dark"></view>
		          </uni-col>
              </view>
		</uni-row>
         
			<view class="example">
				<button type="primary" class="button" @click="submit()">提交</button>
				<button type="primary" class="button" @click="submitForm()">暂存本地</button>
			</view>
		
			
			<view class="popup-bottom" v-if="show">
			  <view class="popup-bg" @click="show = false"></view>
			  <view class="popup-content">
			    <sound-recording
			      :maximum="62"
			      :duration="100"
			      @cancel="show = false"
			      @confirm="onUpload">
			    </sound-recording>
			  </view>
			</view>

	</view>
</template>

<script>
	import formList from "@/components/zhaoxin-formList/formList.vue"
	
    export default {
	    components:{
	        formList
	    },
	    data() {
		return {
			rowList: ['1', '2', '3','4','5','6'],
			nvueWidth: 750,
			imageType: true,
			imgList: [],
			imgBase64List: [],
			luying_new: '开始录音',
			show: false,
			location: '',
			luying: '',
			extraIcon: {
				color: '#007aff',
				size: '25',
				type: 'location-filled'
			},
			luIcon: {
				color: '#007aff',
				size: '25',
				type: 'mic-filled'
			},
			formObj:{},
			formArr: [
				{
					el: 'select',
					label: '路段：',
					code: 'select5',
					required: false,
					search:true,
					list:['搜索是只搜索第一层的','可以模糊搜索']
				},
				{
				  el: 'select',
				  label: '问题类型：',
				  required: false,
				  code: 'select',
				  list:['干净','整洁','安全','卫生']//
				},
				{
				  el: 'textArea',
				  label: '具体内容：',
				  maxlength: 500,
				  placeholder: '问题描述',
				  code: 'textArea',
				  height:'100px',
				  autoHeight:false,
				  required: false
				}
			],
		}	
	},
	onLoad(){
	
		this.switchChange(1)
	},
	methods: {
		submit(){
		  if (this.$refs.formRef.checkForm()) {
		    let data=this.$refs.formRef.checkForm()
		    // 提交数据
		    return;
		    this.$request({
		      method:'POST',
		      url: 'url',
		      data,
		    }).then(res=>{
		      console.log(res)
		    })
		  }
		},
		startRecord(){ //开始录音
			this.show = true
		
		},
		onUpload (tempFilePath) {
		  console.log(tempFilePath)
		  this.show = false
		  this.luying = '已录制'
		  this.luying_new = '重新录制'
		},
		switchChange(e){ //获取位置
		   if(1 == e){
			   uni.getLocation({
			   	   type: 'gcj02',
			       geocode : true,
			       success: res => {
					 console.log(res.address)
					 let s = res.address
					 this.location = s.country + s.province + s.city + s.district + s.street + s.streetNum + s.poiName + s.cityCode
			       }
			   });
		   } else {
			   uni.chooseLocation({
			       success: res => {
			           this.location = res.address
			       }
			   });
		   }
		
		},
		
		//http://159.75.96.228:8080/images/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20210322100435.png
		chooseImage() {
			uni.chooseImage({
				count: 9, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album','camera'], //从相册选择
			  success: (chooseImageRes) => {
				for (var i = 0; i < chooseImageRes.tempFilePaths.length; i++) {
					this.imgList.push(chooseImageRes.tempFilePaths[i]);
					if( this.imgList.length >= 9 ){ 
						this.imageType = false }	
				}
				const tempFilePaths = chooseImageRes.tempFilePaths[1];
				console.log(tempFilePaths)
				uni.uploadFile({
				    url: 'http://159.75.96.228:9090/temperature/post',
				    filePath: tempFilePaths,
				    name: 'file',
					success: (myres) => {
						console.log('================>')
						console.log(myres)
						/* if(jsonObject.code == 0){
							var imageUrl = jsonObject.data.url;
							me.businessLicencesUrl = imageUrl;
							me.isUploadimg = true;
						} */
					},
					fail: res => {
						console.log('进入fail---------------->')
						console.log(res)
					}
				});
			  }
			})
		},
			perviewImg(index){
				let urls = [];
				if(index != -1){
					urls[0] = this.imgList[index];
				}else{
					urls = this.imgList;
				}
				uni.previewImage({
					urls: urls
				});
		},
			handleRemove(index){
				let il=[], ibl=[];
				for (var i = 0; i < this.imgList.length; i++) {
					if(i != index){
						il.push(this.imgList[i]);
						ibl.push(this.imgBase64List[i]);
					}
				}
				this.imgList = il;
				this.imgBase64List = ibl;
				if(this.imgList.length <= 8){
					this.imageType = true
				}
		},
		/**
		 * 缓存本地
		 * @param {Object} form
		 */
		submitForm(form) {
			
		},

	}
}
</script>

<style lang="scss">
	
	.demo-uni-row {
		margin-bottom: 10px;
	
		// 组件在小程序端display为inline
		// QQ、字节小程序文档写有 :host，但实测不生效
		// 百度小程序没有 :host
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}
	.demo-uni-col {
		height: 36px;
		border-radius: $uni-border-radius-base;
	}
	
	
	
	.custom-image-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.text {
		font-size: 14px;
		color: #333;	}
.example {
	padding: 0 10px 10px;
}

.button {
	margin: 5px 10px;
	background-color:#014b8c
}

.content {
    padding: 30rpx;
  }
  .popup-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    .popup-bg {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.5);
    }
    .popup-content {
      height: 40%;
      margin-top: auto;
      background-color: #fff;
      position: relative;
      z-index: 11;
    }
  }
/*  图片 */
  .an-uploadImg-group{
  		margin: 5upx 20upx;
  	}
  	.an-img{
  		float: left; 
  		margin-right: 10upx;
  	}
  	.an-img-add{
  		float: left; 
  		margin-right: 10upx; 
  		height: 100upx; 
  		width: 100upx; 
  		background-color: #C8C7CC; 
  		text-align: center; 
  		line-height: 110upx;
  	}
  	.an-img>image{
  		height: 100upx; 
  		width: 100upx;
  	}
  	.an-icon-close{
  		position: relative; 
  		right: -50upx; 
  		top: -120upx;
  	}
</style>
